﻿<!DOCTYPE html>
<html>
	<head>
		<title>Freewall dem Fit height</title>
		<meta content="text/html; charset=utf-8" http-equiv="content-type">
		<meta name="description" content="Freewall dem Fit height" />
		<meta name="keywords" content="javascript, dynamic, grid, layout, jquery plugin, fit height"/>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="../freewall.js"></script>
		<style type="text/css">
			html, body {
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
			}
			.layout {
				position: absolute;
				right: 0px;
				left: 0px;
				top: 124px;
				bottom: 0px;
				padding: 15px;
				overflow-x: auto;
				overflow-y: hidden;
			}
			.free-wall {
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div class='header'>
			<div class="clearfix">
				<div class="float-left">
						<h1><a href="http://vnjs.net/www/project/freewall/">Free Wall</a></h1>
						<div class='target'>Creating dynamic grid layouts.</div>
				</div>
			</div>
		</div>
		<div class="layout">
			<div id="freewall" class="free-wall">
				<div class="brick size22"></div>
				<div class="brick size12"></div>
				<div class="brick size22"></div>
				<div class="brick size22"></div>
				<div class="brick size11"></div>
				<div class="brick size23"></div>
				<div class="brick size22"></div>
				<div class="brick size22"></div>
				<div class="brick size21"></div>
				<div class="brick size12"></div>
				<div class="brick size32"></div>
				<div class="brick size32"></div>
				<div class="brick size31"></div>
				<div class="brick size21"></div>
				<div class="brick size32"></div>
				<div class="brick size11"></div>
				<div class="brick size21"></div>
				<div class="brick size23"></div>
				<div class="brick size21"></div>
				<div class="brick size21"></div>
			</div>
		</div>
		<script type="text/javascript">

			$(".free-wall .brick").each(function(index, item) {
				item.style.backgroundImage =  "url(i/photo/" + (++index) + ".jpg)";
			});

			$(function() {
				var wall = new Freewall("#freewall");
				wall.reset({
					selector: '.brick',
					cellW: 160,
					cellH: 160,
					onResize: function() {
						wall.fitHeight($(window).height() - 170);
					}
				});
				// caculator height for IE7;
				wall.fitHeight($(window).height() - 170);
				$(window).trigger("resize");
			});

		</script>
	</body>
</html>
